<script setup lang="ts">
import { ref } from 'vue'
import type { VideoVO, Video } from '@/types/VideoVO'
const { params } = useRoute()

const active = ref(0)
const detail = ref<Video>()
const list = ref<Video[]>([])
const barrageList = ref([
  { id: 100, text: '轻量' },
  { id: 101, text: '可定制的' },
  { id: 102, text: '移动端' },
  { id: 103, text: 'Vue' },
  { id: 104, text: '组件库' },
  { id: 105, text: 'VantUI' },
  { id: 106, text: '666' }
])
const barrageRef = ref<any>()
const activeName = ref([])
const play_url = ref('')
const playimg = ref()
const playiframe = ref()
const config = useConfig()

function play(url: string) {
  if (url.includes('.m3u8')) {
    url = config.value.jx_url + url
  }
  play_url.value = url
  playimg.value.style = 'display: none';
  playiframe.value.style = 'display: block';
}

await useFetch('/api/video', { query: { ac: 'detail', ids: params.id } }).then(res => {
  const data = JSON.parse(res.data.value) as VideoVO
  detail.value = data.list[0] as Video
  play_url.value = detail.value.vod_pic
})

useSeoMeta({
  title: detail.value?.vod_name + '- 哔哩哔哩 (゜-゜)つロ 干杯~-bilibili官方',
})

useFetch('/api/video', { query: { ac: 'detail', h: 24, t: detail.value?.type_id } }).then(res => {
  list.value = JSON.parse(res.data.value).list as Video[]
})

</script>

<template>
  <!-- Sticky 粘性布局 -->
  <van-sticky>
    <!-- 头部 -->
    <AppHeader />
    <!-- 弹幕 -->
    <van-barrage v-model="barrageList" :auto-play="false" ref="barrageRef">
      <!-- 视频 -->
      <img ref="playimg" :src="detail?.vod_pic" :alt="detail?.vod_name">
      <div ref="playiframe" class="play-class">
        <iframe id="show-iframe" frameborder="0" scrolling="yes" :src="play_url"></iframe>
      </div>
    </van-barrage>
  </van-sticky>
  <van-collapse v-model="activeName">
    <van-collapse-item title="影视简介" name="1" icon="shop-o">
      <p>演员：{{ detail?.vod_actor }}</p>
      <van-divider />
      简介：<p v-html="detail?.vod_content"></p>
    </van-collapse-item>
  </van-collapse>
  <van-tabs v-model:active="active" type="card" swipeable animated>
    <van-tab v-for="(item, index) in detail?.vod_play_url?.split('$$$')" :key="index" :title="`线路${index + 1}`">
      <van-space wrap style="margin: 15px 0 10px 20px;">
        <van-button plain type="primary" size="mini" v-for="(item2, index2) in item.split('#')" :key="index2"
          @click="play(item2.split('$')[1])">{{ item2.split('$')[0] }}</van-button>
      </van-space>
    </van-tab>
  </van-tabs>
  <!-- 相关推荐 -->
  <div class="relate">
    <h3 class="relate-title">相关推荐</h3>
    <div class="relate-list">
      <AppVideo v-for="item in list" :key="item.vod_id" :item="item" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
img {
  height: 58vm;
  width: 100%;
  display: block;
}

.play-class {
  height: auto;
  display: none;

  #show-iframe {
    background-color: transparent;
    // position: absolute;
    width: 100%;
    height: 58vw;
    top: 0;
    left: 0;
    bottom: 0;
  }
}

img {
  width: 100%;
  height: 58vw;
}

.video-play {
  width: 100vw;
  height: 100vw;
  object-fit: contain;
  background-color: #fff;
}

.info {
  padding: 10px;
  border-bottom: 1px solid #eee;

  .title-text {
    font-size: 16px;
    font-weight: normal;
  }

  .body {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    align-items: center;
  }

  .author {
    display: flex;
    align-items: center;

    .avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }

    .name {
      margin-left: 10px;
      font-size: 14px;
    }
  }
}

.relate {
  .relate-title {
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    padding: 0 10px;
    color: #333;
  }

  .relate-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
  }
}
</style>
